<template>
    <view>
        <view class="groupInfo">
            <view class="info">
                <view class="nameInfo">
                    <label for="" class="label">团名</label>
                    <input v-model="groupParams.name" type="text" placeholder="请输入团名" class="input" />
                </view>
                <view class="workInfo">
                    <label for="" class="label">动漫IP名</label>
                    <input v-model="groupParams.acgnName" type="text" placeholder="请输入作品名" class="input" />
                </view>
            </view>
            <view class="headImg">
                <uni-file-picker id="hdImgPicker" limit="1" :del-icon="false" disable-preview :imageStyles="hdStyles"
                    :auto-upload="false" @select="upload($event,0)">点击上传头像</uni-file-picker>
            </view>
        </view>

        <view class="QRcode">
            <uni-file-picker id="QRcodePicker" limit="1" title="上传群聊二维码" :imageStyles="QRcodeStyles"
                 :auto-upload="false" @select="upload($event,1)"></uni-file-picker>
        </view>
        <view class="bg">
            <uni-file-picker id="bgImgPicker" limit="1" title="上传封面图" :imageStyles="bgStyles"
                :auto-upload="false" @select="upload($event,2)"></uni-file-picker>
        </view>
        <view class="note">
            <view class="noteTitle">公告</view>
            <view class="noteContent">
                <textarea name="" id="" cols="30" rows="10" placeholder="请输入团公告..." v-model="groupParams.notice"></textarea>
            </view>
        </view>
        <button @click="submitForm" class="btn" :disabled="!userInfo.authnStatus=='认证成功'">开团</button>
    </view>
</template>

<script>
import {openGroup} from '@/api/group.js'
import {uploadImg} from '@/api/user.js'
export default {
	onShow() {
		this.userInfo = uni.getStorageSync('userInfo');
		if(this.userInfo.authnStatus==='未认证'){
			uni.showModal({
				title:'提示',
				content:'实名认证后才能开团',
				success(res) {
					if(res.confirm){
						uni.navigateTo({
							url:'/pages/my/identity'
						})
					}else if(res.cancel){
						uni.switchTab({
							url:'/pages/index/index'
						})
					}
				}
			})
		}
	},
    data() {
        return {
			userInfo:{},
            hdStyles: {
                width: '200rpx',
                height: '200rpx',
                border: {
                    radius: '50%'
                }
            },
            bgStyles: {
                width: '730rpx',
                height: '416rpx',
            },
            QRcodeStyles: {
                width: '300rpx',
                height: '400rpx',
            },
			groupParams:{
				name:'',
				acgnName:'',
				avatar:'',
				background:'',
				qrCode:'',
				notice:'',
			},
			// imgArr:['avatarUrl','qrCodeUrl','backgroundUrl']
			imgArr:[
				{
					locationCode:2,
					imgType:'avatar'
				},
				{
					locationCode:4,
					imgType:'qrCode'
				},
				{
					locationCode:3,
					imgType:'background'
				},
			]
        }
    },
    methods: {
		upload(e,id) {
			const tempFilePaths = e.tempFilePaths;
			
			let locationCode=this.imgArr[id].locationCode
			let img=tempFilePaths[0]
			let imgType=this.imgArr[id].imgType
			uploadImg(locationCode, img).then(res=>{
				let url=JSON.parse(res.data).data
				this.groupParams[imgType]=url
			})
		},
		submitForm(){
			let that=this
			let errorNum=0
			Object.keys(that.groupParams).forEach(function(item,key) {
				if (that.groupParams[key]==='') {
					uni.showToast({
						title:'请输入完整团信息',
						icon:'none'
					})
					errorNum=errorNum+1
				}
			});
			if(errorNum===0){
				openGroup(this.groupParams).then(res=>{
					if(res.data.code==200){
						uni.navigateTo({
							url:`./groupSuccess?groupId=${res.data.data.id}`
						})
					}else{
						uni.showToast({
							title:`图片有点大，请稍后哦`,
							icon:'none'
						})
					}
				})
			}
		},
    },
}
</script>

<style scoped>
.groupInfo {
    width: 100%;
    height: 220rpx;
    display: flex;
    margin: 16rpx 0;
}

.info {
    display: flex;
    flex-direction: column;
    flex: 5;
    background-color: #fff;
    font-size: 30rpx;
}

.nameInfo,
.workInfo {
    flex: 1;
    display: flex;
    align-items: center;
    margin-left: 20rpx;
}

.nameInfo::before,
.workInfo::before {
    content: '';
    display: inline-block;
    width: 8rpx;
    height: 34rpx;
    background-color: #75BEFA;
    border-radius: 3rpx;
}

.label {
    font-size: 30rpx;
    width: 150rpx;
    padding: 0 36rpx 0 18rpx;
}

.input {
    height: 50%;
    font-size: 26rpx;
}

.headImg {
    flex: 2;
    display: flex;
	font-weight: 500;
    align-items: center;
}

.QRcode {
	padding: 0 18rpx;
    width: 100%;
    height: 480rpx;
}

.bg,
.note {
	padding: 0 18rpx;
    width: 100%;
    height: 440rpx;
}

.bg {
    height: 500rpx;
}

.noteTitle {
    padding-top: 16rpx;
    padding-bottom: 16rpx;
    /* margin-left: 10rpx; */
    font-size: 30rpx;
    color: #333;
}

.noteContent {
	width: 90%;
    /* margin: 14rpx; */
    border: 1px solid #eee;
    font-size: 30rpx;
    padding: 16rpx;
}

.btn {
    width: 90%;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 34rpx;
    background-color:#8DC7DF;
    border-radius: 60rpx;
    color: #fff;
    margin-top: 30rpx;
}
</style>